<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>首页</title>
    <style>
        * {
            scroll-behavior: smooth;
        }

        #head1 img {
            width: 100%;
            height: auto;
            margin: 0;
            padding: 0;
        }

        #head1 h2 {
            position: absolute;
            top: 5px;
            left: 2%;
        }

        nav>ul {
            list-style: none;
            text-align: center;
            background-color: rgb(178, 205, 246);
            margin: 5px 0 0 0;
            padding: 0;
        }

        nav>ul>li {
            display: inline-block;
            margin: 0;
            border: 0;
        }

        nav>ul>li>p,
        nav>ul>li>a {
            text-decoration: none;
            padding: 15px 20px;
            display: inline-block;
            margin: 0;
            color: black;

        }

        nav>ul>li:hover {
            background-color: rgb(206, 221, 242);
        }

        .yjy {
            display: none;
        }

        nav li:hover .yjy {
            display: block;
        }

        .yjy {
            list-style: none;
            position: absolute;
            background-color: rgb(206, 221, 242);
            margin: 0;
            padding: 0;
        }

        .yjy>li {
            padding: 0px 0px;
        }

        .yjy>li>a {
            text-decoration: none;
            color: black;
            width: 120px;
            float: left;
        }

        .yjy>li>a:hover {
            background-color: rgb(178, 205, 246);
        }

        #rnava,
        #rnava2,
        #foot a {
            text-decoration: none;
            color: black;
        }

        #rnavimg {

            float: right;
            position: sticky;
            top: 30px;
            right: 42px;
            max-width: 17%;
        }

        #rnava {
            clear: right;
            float: right;
            position: sticky;
            top: 278px;
            right: 78px;
            font-size: 20px;
            max-width: 17%;
        }

        #rnava2 {
            clear: right;
            float: right;
            position: sticky;
            top: 305px;
            right: 78px;
            font-size: 20px;
            max-width: 17%;

        }

        .mokuai a:hover,
        #rnava:hover,
        #rnava2:hover {
            color: green;
        }

        .mokuai {
            margin: 10px 0 150px 6%;
            max-width: 83%;
        }

        .mokuai img {
            display: inline-block;
            margin: 20px 40px 20px 0;
        }

        .mokuai a {
            display: block;
            text-decoration: none;
            color: black;
            margin: 0px 0 0 25%;
            font-size: 25px;
        }

        #foot {
            background-color: rgb(207, 209, 209);
            max-width: 100%;
            height: 140px;
            text-align: center;
            padding-top: 7px;
        }
    </style>
</head>

<body>
    <header>
        <!--最上面的图片-->
        <div id="head1" align="center">
            <img src="res/head1.jpg">
            <h2>旅游网</h2>
        </div>

        <!--开头导航栏-->
        <nav>
            <ul>

                <li><a href="#qing">晴</a></li>
                <li><a href="#yu">雨</a></li>
                <li><a href="#xue">雪</a></li>
                <li>
                    <p>更多</p>
                    <ul class="yjy">
                        <li><a href="yjy/xining.html" target="_blank">西宁</a></li>
                        <li><a href="yjy/nanjing.html" target="_blank">南京</a></li>
                        <li><a href="yjy/qianxinan.html" target="_blank">黔西南</a></li>
                    </ul>
            </ul>
        </nav>
    </header>

    <main>
        <!--右侧导航栏-->

        <img src="res/indexright.jpg" id="rnavimg" width="160px" height="240px">
        <a href="#head1" id="rnava">回到顶部↑</a>
        <a href="#foot" id="rnava2">去到底部↓</a>


        <!--中心图组-->
        <div class="mokuai" id="qing">
            <img src="res/index1.jpg" width="460px" height="400px">
            <img src="res/index2.jpg" width="460px" height="400px">
            <img src="res/index3.jpg" width="460px" height="400px">
            <img src="res/index4.jpg" width="460px" height="400px">
            <a href="http://www.dali.gov.cn/dlrmzf/c101724/201907/d47ec7ea54a24c1e8be70e24b949e9e9.shtml"
                target="_blank">大理&nbsp;洱海</a>
        </div>
        <div class="mokuai" id="yu">
            <img src="res/taierz1.jpg" width="960px" height="400px">
            <img src="res/taierz2.jpg" width="460px" height="300px">
            <img src="res/taierz3.jpg" width="460px" height="300px">
            <img src="res/taierz5.jpg" width="460px" height="300px">
            <img src="res/taierz4.jpg" width="460px" height="300px">
            <a href="http://www.tezgc.com/#/home" target="_blank">台儿庄</a>
        </div>
        <div class="mokuai" id="xue">
            <img src="res/cbs2.jpg" width="960px" height="450px">
            <img src="res/cbs3.jpg" width="460px" height="300px">
            <img src="res/cbs4.jpg" width="460px" height="300px">
            <a href="http://www.changbaishan.gov.cn/zbsly/" target="_blank">长白山</a>
        </div>
    </main>

    <!--页脚-->
    <footer>
        <div id="foot">
            <p>部分资料来自网络&nbsp;用于作业效果展示</p>
            <a href="report.html" target="_blank">「作业报告」</a>
        </div>
    </footer>
</body>